<div class="table-responsive order-table table-bordered">
	<table class="table mb-0 text-nowrap align-middle" data-v-cart>
		<thead>
			<tr>
				<th class="text-center">Image</th>
				<th class="text-start">Product Name</th>
				<!-- <th class="text-start">Model</th> -->
				<th class="text-start">Quantity</th>
				<th class="text-end">Unit Price</th>
				<th class="text-end">Total</th>
			</tr>
		</thead>
		<tbody>
			<tr data-v-order-product>
				<td class="text-center order-img">
					<a href="#40" data-v-order-product-url>
						<img src="#" alt="Product name" class="img-rounded" data-v-order-product-image width=50 loading="lazy">
					</a>
				</td>
				<td class="text-start">
					<a href="#40" target="_blank" data-v-order-product-url>
						<span data-v-order-product-name>Product name</span>
					</a>

					<div class="option" data-v-if="product.option_value">
						<div class="" data-v-product-option>
							<span data-v-product-option-option>Color</span>: <span data-v-product-option-name>Red</span> <span data-v-if="value.price">(<span data-v-product-option-price_formatted></span>)</span>
						</div>
						<div class="" data-v-product-option>
							<span data-v-product-option-option>Size</span>: <span data-v-product-option-name>XL</span> <span data-v-if="value.price">(<span data-v-product-option-price_formatted></span>)</span>
						</div>
						<div class="" data-v-product-option>
							<span data-v-product-option-option>Material</span>: <span data-v-product-option-name>Wool</span> <span data-v-if="value.price">(<span data-v-product-option-price_formatted></span>)</span>
						</div>
					</div>
								
					<div class="price">
						<span data-v-order-product-price_tax_formatted>$160.40</span>
					</div>
				</td>
				
				<!-- <td class="text-start">product 11</td> -->
				<td class="text-start">
					<span data-v-order-product-quantity>1</span>
				</td>
				<td class="text-end unit-price">
					<span data-v-order-product-price_formatted>1</span>
				</td>
				<!-- <td class="text-end price" data-v-order-product-price>$123.20</td> -->
				<td class="text-end total px-4">
					<span data-v-order-product-tax_formatted>$146.40</span>
				</td>
			</tr>
		 </tbody>

	  <tfoot data-v-order-totals>
		  <tr data-v-order-totals-total>
			 <td colspan="4" class="text-end"><small data-v-order-total-title>Sub-Total</small>:</td>
			 <td class="text-end" data-v-order-total-value_formatted>$101.00</td>
		  </tr>
		  <tr data-v-order-totals-total>
			 <td colspan="4" class="text-end"><small>Eco Tax (2.00):</small></td>
			 <td class="text-end">$2.00</td>
		  </tr>
		  <tr data-v-order-totals-total>
			 <td colspan="4" class="text-end"><small>VAT (19%):</small></td>
			 <td class="text-end">$20.20</td>
		  </tr>
		  <tr data-v-order-totals-total>
			 <td colspan="4" class="text-end"><small>Total:</small></td>
			 <td class="text-end">$123.20</td>
		  </tr> 
		  <tr>
			 <td colspan="4" class="text-end">Total:</td>
			 <td class="text-end" data-v-order-total_formatted>$0</td>
		  </tr>
	   </tfoot>

	</table>
	
</div>
